<template>
  <div class="center-box">
    <div class="login-logo">
      <img src="../image/login-logo-2.png" alt="" />
    </div>
    <div class="shopping">
      <div class="left-box">
        <div class="left-iamge">
          <img src="../image/Snipaste_2023-01-07_15-18-19.png" alt="" />
        </div>
      </div>
      <div class="right-box">
        <el-form
          class="demo-ruleForm"
          label-width="70px"
          :model="ruleForm"
          :rules="rules"
          ref="ruleForms"
        >
          <div class="momer-box">
            <div class="momer-login">会员注册</div>
            <div class="no-memer">您已有账号?</div>
            <router-link to="/Login" class="register"
              >立即登录</router-link
            >
          </div>
          <div class="under-line"></div>
          <el-form-item label="手机号:" prop="loginName" class="font">
            <el-input
              v-model="ruleForm.loginName"
              placeholder="请输入手机号码"
              size="medium"
              class="input-item"
            />
          </el-form-item>
          <el-form-item label="密码:" prop="passwordMd5" class="font">
            <el-input
              type="password"
              v-model="ruleForm.passwordMd5"
              placeholder="请输入密码"
              size="medium"
              class="input-item"
            />
          </el-form-item>
          <el-form-item label="验证码:" prop="verification" class="font">
            <el-input
              v-model="ruleForm.verification"
              placeholder="请输入验证码"
              size="medium"
              class="input-verification"
            />
            <div class="SecurityCode" @click="refreshCode()">
              <SecurityCode :identifyCode="ruleForm.identifyCode"></SecurityCode>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              class="login-button"
              @click="submitForm('ruleForms')"
              >立即注册</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script  >
import SecurityCode from "@/securityCode/securityCode.vue";
import axios from "axios";
export default {
  components: {
    SecurityCode,
  },
  data() {
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error("密码长度不应少于六位数"));
      } else {
        callback();
      }
    };
    const validateTelephone = (rule, value, callback) => {
      const reg = /^1[3-9]\d{9}$/;
      if (!value) {
        callback(new Error("手机号不能为空"));
      } else if (!reg.test(value)) {
        callback(new Error("请填写正确手机格式"));
      } else {
        callback();
      }
    };
    const validateVerifycode = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入验证码"));
      } else if (value !== this.ruleForm.identifyCode) {
        console.log("validateVerifycode:", value);
        callback(new Error("验证码不正确!"));
      } else {
        callback();
      }
    };

    return {
      ruleForm: {
        loginName: "", //电话号码
        passwordMd5: "", //密码
        verification: "", //验证码
        identifyCodeType: "1234567890abcdefghijklmnopqrstuvwxyz", //定义验证类型 1.数字 2.字母
        identifyCode: "", //输入的验证码
        inputCode: "", //text框输入的验证码
      },
      rules: {
        loginName: [{ validator: validateTelephone, trigger: "blur" }],
        passwordMd5: [
          { validator: validatePassword, min: 6, max: 12, trigger: "blur" },
        ],
        verification:[
          {validator:validateVerifycode,trigger:'blur'}
        ]
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          axios({
            method: "POST",
            url: "http://backend-api-02.newbee.ltd/api/v1/user/register",
            data: this.ruleForm,
          }).then((res) => {
            console.log(res);
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 验证码规则
    // getSubmitData() {
    //   if (this.inputCode == "") {
    //     alert("请输入验证码");
    //     return;
    //   }
    //   if (this.ruleForm.identifyCode !== this.inputCode) {
    //     this.inputCode = "";
    //     this.refreshCode();
    //     alert("请输入正确的验证码!");
    //     return;
    //   } else {
    //     this.$message({
    //       message: "验证成功",
    //       type: "success",
    //     });
    //   }
    // },
    //验证码
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    //初始化验证码
    refreshCode() {
      this.ruleForm.identifyCode = ""; //输入框置空
      // console.log(this.ruleForm.identifyCodeType);
      this.makeCode(4); //验证码长度为4
    },
    //随机切换验证码
    makeCode(l) {
      // console.log(this.identifyCodeType);
      for (let i = 0; i < l; i++) {
        this.ruleForm.identifyCode +=
          this.ruleForm.identifyCodeType[
            this.randomNum(0, this.ruleForm.identifyCodeType.length)
          ];
      }
      // console.log(this.identifyCode);
    },
  },
  mounted() {
    this.refreshCode();
  },
};
</script>
<style lang="scss">
.center-box {
  height: 100%;
  .el-form-item__content{
  line-height:18px;
  }
  .under-line {
    height: 2px;
    width: 300px;
    margin: 0px auto;
    margin-bottom: 20px;
    background-color: #1baeae;
  }
  .login-logo {
    margin-top: -15px;
    img {
      height: 150px;
      margin-left: 75px;
    }
  }
  .shopping {
    display: flex;
    justify-content: space-between;
    margin-top: -50px;
    height: 750px;
    background-color: #14212a;
  }
  .left-box {
    .left-iamge > img {
      margin-left: 140px;
      margin-bottom: 200px;
      transform: scale(0.6);
      margin-top: -10px;
    }
  }
  .right-box {
    width: 500px;
    margin: 50px auto;
    .demo-ruleForm {
      border-radius: 1%;
      width: 360px;
      height: 450px;
      background-color: #444444;

      .momer-box {
        display: flex;
        justify-content: space-between;
        .momer-login {
          margin: 0 10px;
          height: 100px;
          line-height: 100px;
          font-size: 20px;
          color: #fff;
          font-weight: bold;
        }
        .no-memer {
          padding-left: 60px;
          height: 100px;
          line-height: 100px;
          font-size: 13px;
          color: #fff;
        }
        .register {
          // margin-right: 10px;
          height: 100px;
          line-height: 100px;
          color: #1baeae;
          font-size: 13px;
          font-weight: bold;
          text-decoration: none;
          padding-right: 10px;
        }
      }
    }
  }
  .login-button {
    width: 240px;
    height: 45px;
    background-color: #1baeae;
    font-weight: bold;
    font-size: 20px;
  }
  .font .el-form-item__label {
    font-size: 16px;
    color: #fff;
    height: 40px;
    line-height: 40px;
    margin-left: 25px;
    margin: 10px;
    align-items: center;
  }
  .input-item {
    width: 220px;
    height: 45px;
    // border: 1px solid #ccc;
  }
  .input-verification {
    width: 116px;
    height: 45px;
    padding: 0 5px;
  }
}
</style>
